<template>
    <el-dialog :model-value="show" title="分配角色" @close="$emit('hide')">
      <el-select v-model="list" multiple placeholder="Select">
        <el-option
          v-for="item in roles"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <template #footer>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </template>
    </el-dialog>
  </template>
  <script setup lang="ts">
  import { ElMessage, ElMessageBox } from "element-plus";
  import { ref, watch } from "vue";
  import { getRoleListApi, getRolesByUserIdApi, updateUserRolesApi } from "./api";
  
  const emit = defineEmits(["hide"]);
  
  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
  });
  const list = ref<number[]>([]);
  const roles = ref<{ value: number; label: string }[]>([]);
  
  getRoleListApi().then((res) => {
    if (res.code === 200) {
      roles.value = res.data.map((item) => ({
        label: item.name,
        value: item.id,
      }));
    }
  });
  watch(
    () =>  props.id,
    () => {
      if (props.id === 0) return;
      getRolesByUserIdApi(props.id).then((res) => {
        if (res.code === 200) {
          list.value = res.data.map((item) => item.id);
        }
      });
    }
  );

  const cancel = ()=>{
  emit("hide");
}
  const submit = () => {
    ElMessageBox.confirm("确定要修改当前用户的角色吗?", "修改用户角色", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        updateUserRolesApi(props.id, list.value).then((res) => {
          if (res.code === 200) {
            emit("hide");
            ElMessage.success("修改成功");
          }
        });
      })
      .catch(() => {});
  };
  </script>
  <style lang="less" scoped></style>
  